<template>
  <div
    style="
      width: 100%;
      height: 100%;
      background: #0071ff;
      background: linear-gradient(111deg, #2572fd, #256cff, #27c5ff);
    "
  >
    <el-alert
      v-if="nodeEnv !== 'development'"
      :title="`欢迎使用${title}`"
      type="success"
      :closable="false"
      style="position: fixed"
    ></el-alert>
    <div
      style="
        display: flex;
        flex-direction: row;
        width: 60%;
        height: 663px;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        left: 20%;
        background: #ffffff;
        border-radius: 30px;
        box-sizing: border-box;
        padding: 48px;
        margin: auto;
        box-shadow: rgb(44 70 255) 10px 10px 20px;
      "
    >
      <div style="flex: 0.8">
        <img src="~@/assets/login_images/login.png" />
      </div>
      <div style="flex: 1; padding: ">
        <el-form
          ref="form"
          style="display: flex; flex-direction: column"
          :model="form"
          :rules="rules"
          label-position="left"
          class="login-form"
        >
          <div
            style="
              font-size: 38px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #333333;
              line-height: 105px;
            "
          >
            {{ title }}
          </div>
          <div
            style="
              font-size: 26px;
              font-family: 58;
              font-weight: 400;
              color: #a9a9a9;
            "
          >
            Welcome欢迎登陆
          </div>
          <el-form-item prop="username" style="margin-top: 30px">
            <el-input
              prefix-icon="el-icon-user"
              v-model.trim="form.LoginName"
              v-focus
              placeholder="请输入用户名"
              tabindex="1"
              type="text"
            />
          </el-form-item>
          <el-form-item prop="password" style="margin-top: 30px">
            <el-input
              prefix-icon="el-icon-lock"
              :key="passwordType"
              ref="password"
              v-model.trim="form.password"
              :type="passwordType"
              tabindex="2"
              placeholder="请输入密码"
              @keyup.enter.native="handleLogin"
            />
            <!--span
              v-if="passwordType === 'password'"
              class="show-password"
              @click="handlePassword"
            >
              <vab-icon :icon="['fas', 'eye-slash']"></vab-icon>
            </span>
            <span v-else class="show-password" @click="handlePassword">
              <vab-icon :icon="['fas', 'eye']"></vab-icon>
            </span-->
          </el-form-item>
          <el-button
            :loading="loading"
            style="
              width: 460px;
              height: 60px;
              background: #4f93fe;
              border: 1px solid #1a72fe;
              border-radius: 30px;
              font-size: 28px;
              font-family: 58;
              font-weight: 500;
              color: #ffffff;
              align-self: center;
            "
            @click="handleLogin"
          >
            立 即 登 录
          </el-button>

          <!-- <router-link to="/register">
            <div style="margin-top: 20px">注册</div>
          </router-link> -->
        </el-form>
      </div>
    </div>
    <div style="bottom: 20px; width: 100%; position: fixed; text-align: center">
      <a href="https://beian.miit.gov.cn/shouye.html" style="color: #fff">
        粤ICP备2021131921号
      </a>
    </div>
  </div>
</template>

<script>
import { isPassword } from '@/utils/validate'
import { title } from '@/config'
import cardReader from '@/utils/idcardReader'
import { Alert } from 'element-ui'
export default {
  name: 'Login',
  directives: {
    focus: {
      inserted(el) {
        el.querySelector('input').focus()
      },
    },
  },
  data() {
    const validateusername = (rule, value, callback) => {
      if ('' == value) {
        callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
    return {
      nodeEnv: process.env.NODE_ENV,
      title: this.$baseTitle,
      form: {
        LoginName: '',
        Password: '',
      },
      rules: {
        LoginName: [
          {
            required: true,
            trigger: 'blur',
            validator: validateusername,
          },
        ],
        Password: [
          {
            required: true,
            trigger: 'blur',
            validator: validatePassword,
          },
        ],
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = (route.query && route.query.redirect) || '/'
      },
      immediate: true,
    },
  },
  created() {
    document.body.style.overflow = 'hidden'
  },
  beforeDestroy() {
    document.body.style.overflow = 'auto'
  },
  mounted() {
    this.form.LoginName = ''
    this.form.Password = ''
  },
  methods: {
    handlePassword() {
      this.passwordType === 'password'
        ? (this.passwordType = '')
        : (this.passwordType = 'password')
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('user/login', this.form)
            .then(() => {
              const routerPath =
                this.redirect === '/404' || this.redirect === '/401'
                  ? '/'
                  : this.redirect
              this.$router.push(routerPath).catch(() => {})
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
      /* setTimeout(() => {
        window.open('https://github.com/chuzhixin/vue-admin-beautiful')
      }, 100000) */
    },
  },
}
</script>

<style lang="scss">
.login-container {
  height: 100vh;
  background: url('~@/assets/login_images/background.jpg') center center fixed
    no-repeat;
  background-size: cover;
}
.login-form .el-input {
  border: none;
  border-bottom: 2px solid #eee;
  font-size: 24px;
  font-family: 58;
  font-weight: 400;
  color: #a9a9a9;
  line-height: 60px;
}
.login-form .el-form-item.is-error .el-input {
  border-bottom-color: red;
}
.login-form .el-input__inner {
  border: none;
}
.login-form .el-input__prefix {
  height: 32px;
  bottom: 36px;
}
.login-form .el-input--small .el-input__icon {
  color: #4e94ff;
}
</style>
